<template>
  <div class="list" style="width: 80%; height: 100%; margin: 20px auto">
    <div v-if="orders.length === 0" class="empty-box">
      <span style="font-family: 华文彩云; font-size: 40px">没有订单记录</span>
    </div>
    <span v-for="order in orders" :key="order.id">
      <OrderItem
        :order="order"
        style="margin-bottom: 5px"
        :orderType="orderConfig.orderType"
      />
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import OrderItem from "../../components/order-item/index.vue";

const store = useStore();

// Reactive data
const orders = ref<any[]>([]);
const orderConfig = ref<any>(store.state.pagesConfig.orderConfig);

// Load orders
const loadOrders = async () => {
  try {
    const userIdRes = await store.state.request.get("/userid");
    const ordersRes = await store.state.request.get(
      `/api/order/userid/${userIdRes}`
    );

    if (ordersRes.code === "200") {
      orders.value = ordersRes.data.map((order: any) => ({
        ...order,
        create_time: new Date(order.create_time)
          .toLocaleString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, ""),
      }));
    }
  } catch (error) {
    console.error("Error loading orders:", error);
  }
};

// Lifecycle
onMounted(() => {
  loadOrders();
});
</script>

<style scoped>
.list {
  width: 60%;
  margin: 10px auto;
}

.empty-box {
  border-radius: 30px;
  text-align: center;
  background-color: white;
  padding: 100px;
}
</style>
